<template>
    <div class="row" style="
    margin-top: 10px;
    display: flex;
">
        <ul class="collapsible" data-collapsible="accordion" style="
        margin-left: 4rem;width: 26rem
    ">
            <li class="active">
                <div class="collapsible-header">节点数据</div>
                <div class="collapsible-body" style="display: block">
                    <div class="row">
                        <form class="col s12">
                            <div class="row">
                                <div class="input-field col s12">
                                    <textarea id="t1" class="materialize-textarea"
                                              style="border-bottom: 0px;width: 24rem;"></textarea>
                                    <label for="textarea">请输入节点数据</label>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </li>
            <li class="active">
                <div class="collapsible-header">关系数据</div>
                <div class="collapsible-body" style="display: block;">
                    <div class="row">
                        <form class="col s12">
                            <div class="row">
                                <div class="input-field col s12">
                                    <textarea id="t2" class="materialize-textarea"
                                              style="border-bottom: 0px;width: 24rem;"></textarea>
                                    <label for="textarea1">请输入关系数据</label>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </li>
            <li class="active">
                <div class="collapsible-header">节点配色</div>
                <div class="collapsible-body" style="display: block;">
                    <div class="row">
                        <form class="col s12">
                            <div class="row">
                                <div class="input-field col s12">
                                    <textarea id="t3" class="materialize-textarea"
                                              style="border-bottom: 0px;width: 24rem;"></textarea>
                                    <label for="textarea1">请输入节点配色</label>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </li>
            <li class="active">
                <div class="collapsible-header">关系配色</div>
                <div class="collapsible-body" style="display: block;">
                    <div class="row">
                        <form class="col s12">
                            <div class="row">
                                <div class="input-field col s12">
                                    <textarea id="t4" class="materialize-textarea"
                                              style="border-bottom: 0px;width: 24rem;"></textarea>
                                    <label for="textarea1">请输入关系配色</label>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </li>
            <li class="active">
                <div class="collapsible-header">回显内容</div>
                <div class="collapsible-body" style="display: block;">
                    <div class="row">
                        <form class="col s12">
                            <div class="row">
                                <div class="input-field col s12">
                                    <textarea id="t5" class="materialize-textarea"
                                              style="border-bottom: 0px;width: 24rem;"></textarea>
                                    <label for="textarea1">请输入回显内容</label>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </li>
            <li class="btn_container">
                <a class="waves-effect waves-light btn-large" v-on:click="renderbutton()">渲染</a>
            </li>

            <li class="active">
                <div class="collapsible-header">要查询的属性名</div>
                <div class="collapsible-body" style="display: block;">
                    <div class="row">
                        <form class="col s12">
                            <div class="row">
                                <div class="input-field col s12">
                                    <textarea id="t6" class="materialize-textarea"
                                              style="border-bottom: 0px;width: 24rem;"></textarea>
                                    <label for="textarea1">请输入要查询的属性名和属性值，格式为key=value</label>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </li>
            <li class="btn_container">
                <a class="waves-effect waves-light btn-large" @click="selectapi()">查询</a>
            </li>
        </ul>
        <div class="col s12 m7" style="
            float: left;
            margin-right: 4rem;
        ">
            <div class="card">

                <div id="container" class="card-image container">
                    <!--                    <span class="card-title" style="color: #868181;">Knowlegde Graph</span>-->
                </div>

            </div>
        </div>

        <!--模态框-->
        <div class="modal" id="xymodal" tabindex="-1" role="dialog" aria-labelledby="xymodallabel" aria-hidden="true">
            <div class="modal1">
                <div id="modalcont" class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">标题</h4>
                        <div class="modal-body">xxxxxxxxxx</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style>
    @import '../css/kg.css';
    @import "~materialize-css/dist/css/materialize.min.css";
</style>

<script>
    import 'materialize-css/dist/js/materialize'
    import {initKG,rendergraph} from '../js/kg'
    import 'jquery/dist/jquery'
    import  "../js/request";
    import d3 from 'd3'
    import axios from 'axios'
    export default {
        name: 'graphview',
        mounted(){
            let t1=document.querySelector('#t1');
            let t2=document.querySelector('#t2');
            var t1_text = ""
            t1.value = t1_text;
            var t2_text = ""
            t2.value = t2_text;

            rendergraph();
        },
        methods:{
            renderbutton: function () {
                try {
                    // document.querySelector("svg").remove()
                    var data = {};
                    data.nodes = JSON.parse(document.getElementById("t1").value);
                    data.links = JSON.parse(document.getElementById("t2").value);
                    var config = {
                        //鼠标mouseover后的弹窗
                        content: document.getElementById("t5").value,
                        contentHook: null,
                        //节点配色方案（可为空)
                        nodeColor: document.getElementById("t3").value,
                        //连接线配色方案（可为空）
                        linkColor: document.getElementById("t4").value,
                        width: document.getElementById("container").clientWidth,
                        height: document.getElementById("container").clientHeight
                    }
                    initKG(data, config, "#container")
                } catch (err) {
                    console.log(err)
                    // Materialize.toast('渲染存在异常', 2000)
                }
            }
        }
    }


</script>